$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;
  .shadow {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    object-fit: cover;
    z-index: -1;
  }

  .section1{
    width: 80vw;
    margin: 8vw auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    .lt{
      display: flex;
      align-items: center;
      margin-top:2vw;
      span{
        width: 7/19.2+vw;
        height: 7/19.2+vw;
        background-color: rgba(0, 255, 255, 1);
        border-radius: 50%;
        display: block;
      }
      p{
        margin-left: 5px;
        font-size: $fontSize_16;
      }
    }
    .rbox{
      width: 90%;
      .t{
        color: #000;
        font-size: $fontSize_64;
        letter-spacing: 4px;
      }
      .box{
        display: flex;
        justify-content: space-between;
        margin-top: 3vw;
        .st{
          color: #000;
          font-size: $fontSize_16;
        }
        .c{
          width: fit-content;
          margin-left: 20vw;
          p{
            font-size: $fontSize_22;
            margin-bottom: 8px;
            cursor: pointer;
          }
        }
        .rs{
          width: 25vw;
          color: #000;
          font-size: $fontSize_18;
          line-height: 1.6;
        }
      }
    }
  }

  .section2{
    height: 100vh;
    position: relative;
    .fix{
      position: sticky;
      top: 0;
      height: 100vh;
      .position_img{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        img{
          width: 100%;
          height: 100%;
          opacity: 0;
          transition: .6s;
          object-fit: cover;
          &:not(:first-child) {
            position: absolute;
            top: 0;
            left: 0;
          }
          &.on{
            opacity: 1;
          }
        }
      }
      .content{
        width: 100%;
        height: 100%;
        z-index: 98;
        .matter {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 100;
          opacity: 0;
          .joke{
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            .title{
              color: #FFF;
              font-size: $fontSize_64;
              font-style: normal;
              font-weight: 400;
              margin: 180px 0 0 10vw;
            }
            .bottom{
              position: absolute;
              bottom: $fontSize_64;
              left: 10vw;
              display: flex;
              .l{
                margin: 0 28vw 0 0;
                h1{
                  color: #FFF;
                  font-size: $fontSize_36;
                  font-style: normal;
                  font-weight: 400;
                  line-height: normal;
                  margin: 0 0 1.3vw;
                }
                .more{
                  display: flex;
                  align-items: center;
                  cursor: pointer;
                  p{
                    color: #FFF;
                    font-size: $fontSize_16;
                    font-style: normal;
                    font-weight: 400;
                    margin: 0 0.5vw 0 0;
                  }
                  img{
                    width: 1.04vw;
                  }
                }
              }
              .r{
                p{
                  color: #FFF;
                  font-size: 1.04vw;
                  font-style: normal;
                  font-weight: 400;
                  line-height: 1.35vw; /* 130% */
                  &:not(:last-child) {
                    margin: 0 0 1.3vw;
                  }
                }
              }
            }
          }
        }
      }
    }
  }


  .section5 {
    width: 100%;
    position: relative;

    .bg {
      img {
        width: 100%;
      }
    }

    .text {
      position: absolute;
      bottom: 35%;
      left: 0;
      width: 100%;
      text-align: center;
      color: #000;
      font-size: $fontSize_40;
    }

    .btn {
      position: absolute;
      left: 50%;
      bottom: -.8vw;
      transform: translateX(-50%);

      .ball {
        width: 133/19.2+vw;
        height: 133/19.2+vw;
      }

      .en {
        img {
          width: 121/19.2+vw;
          height: 121/19.2+vw;
          animation: spin 14s linear infinite;
        }
      }

      @keyframes spin {
        100% {
          transform: rotate(1turn);
        }
      }

      .en,
      p {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      p {
        color: white;
        font-size: $fontSize_18;
      }

      .icon {
        position: absolute;
        right: 30/19.2+vw;
        top: 30/19.2+vw;
        width: 24/19.2+vw;
        height: 24/19.2+vw;
      }
    }
  }

  @media screen and (max-width: 1024px) {
    padding-top: 70px;
    .section1{
      width: 90%;
      margin: 0 auto;
      flex-direction: column;
      .lt{
        span{
          width: 6px;
          height: 6px;
        }
        p{
          font-size: 16px;
          margin-left: 10px;
        }
      }
      .rbox{
        width: 100%;
        margin-top: 10px;
        .t{
          font-size: 24px;
        }
        .box{
          flex-wrap: wrap;
          justify-content: flex-start;
          margin-top: 30px;
          .st{
            font-size: 16px;
          }
          .c{
            margin-left: 10%;
            p{
              font-size: 16px;
            }
          }
          .rs{
            width: 100%;
            font-size: 14px;
            margin: 20px 0;
          }
        }
      }
    }
    .section2{
      .fix{
        .content{
          .matter{
            .joke{
              .title{
                margin: 60px 0 0 5%;
                font-size: 24px;
              }
              .bottom{
                left: 5%;
                bottom:200px;
                flex-direction: column;
                .l{
                  margin: 0;
                  h1{
                    font-size: 18px;
                    line-height: 1.6;
                  }
                  .more{
                    p{
                      font-size: 16px;
                    }
                    img{
                      width: 20px;
                      margin-left: 5px;
                    }
                  }
                }
                .r{
                  margin-top: 20px;
                  p{
                    font-size: 16px;
                    line-height: 1.6;
                  }
                }
              }
            }
          }
        }
      }
    }
    .section5{
      margin-bottom: 30px;
      .text{
        font-size: 16px;
        bottom:40%;
      }
      .btn{
        bottom:-30px;
        .ball{
          width: 60px;
          height: 60px;
        }
        .en{
          img{
            width: 55px;
            height: 55px;
          }
        }
        .icon{
          width: 15px;
          height: 15px;
          right:10px;
          top:10px; 
          display: none;
        }
        p{
          font-size: 12px;
        }
      }
    }
  }
}